<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <div class="bottom_content">
                <div class="search_input">
                    <div class="item_first">
                        <el-row :gutter="20">
                            <el-col :span="3">
                                <div class="item">
                                    <span>信息类型：</span>
                                    <div>
                                        <el-select v-model="infor.type_information" placeholder="信息类型" size="large">
                                            <el-option label="普通信息" :value="1" />
                                            <el-option label="vip信息" :value="2" />
                                        </el-select>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="item">
                                    <span>订单类型：</span>
                                    <div>
                                        <el-select v-model="infor.type_order" placeholder="全部/普通/VIP" size="large">
                                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in infor_type_list" :key="index"/>
                                        </el-select>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="item">
                                    <span>手机号：</span>
                                    <div>
                                        <el-input v-model="infor.phone_number" placeholder="请输入手机号" size="large" />
                                    </div>
                                </div>
                            </el-col>
							<el-col :span="4">
							    <div class="item">
							        <span>微信号：</span>
							        <div>
							            <el-input v-model="infor.we_chat" placeholder="请输入微信号" size="large" />
							        </div>
							    </div>
							</el-col>
							<el-col :span="4">
							    <div class="item">
							        <span>维护人：</span>
							        <div>
							            <el-select v-model="infor.maintainers" placeholder="请选择" size="large">
							                <el-option :label="item.nickname" :value="item.id" v-for="(item,index) in maintainers_list" :key="index"/>
							                
							            </el-select>
							        </div>
							    </div>
							</el-col>
							
							<el-col :span="4">
							                  <div class="item">
							                      <span>发布地区：</span>
							                      <div>
							                          <el-cascader v-model="infor.region_release" :options="region_data"
							:props="{ value: 'code', label: 'name', children: '_child' }" placeholder="请选择地区"/>
							                      </div>
							                  </div>
							              </el-col>
                        </el-row>
                    </div>
                    <div class="item_first">
                        <el-row :gutter="20">
                           
                            
                           
							
							<el-col :span="3">
							    <div class="item">
							        <span>是否付款：</span>
							        <div>
							            <el-select v-model="infor.is_pay" placeholder="请选择" size="large">
							                <el-option label="已付款" :value="1" />
							                <el-option label="未付款" :value="2" />
							            </el-select>
							        </div>
							    </div>
							</el-col>
							<el-col :span="6">
							    <div class="item">
							        <span>发布时间：</span>
							        <div>
							            <Picker @time_change="time_change" />
							        </div>
							    </div>
							</el-col>
							<el-col :span="3">
							    <div class="submit_button">
							        <el-button type="primary" size="large" @click="inquire">查询</el-button>
							        <el-button type="warning" size="large" @click="reset">重置</el-button>
							    </div>
							</el-col>
                        </el-row>
						

                    </div>
                    

                </div>
                <div class="table">
                    <Table :list="table_list"/>
                </div>
                <div class="pagination">
                    <Pagination :list="page_list" :limit="limit" @change="page_change"/>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import Picker from '@/components/home/picker.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Nav from "@/components/public/nav.vue"
import Pagination from "@/components/home/task/pagination.vue"
import Table from "@/components/Information/tableList.vue"
import {get_information_list,get_infor_type} from "@/request/api/information.ts"
import {get_user_data,get_region_data} from "@/request/api/user.ts"
const infor:any = reactive({
    type_information: '',
    type_order: '',
    phone_number: '',
    we_chat: '',
    maintainers: "",
    region_release: "",
    is_pay: "",
    released: "",
    created_at_start : "",
    created_at_end : ""
})
let table_list = ref("")
let page_list = ref("")
let maintainers_list:any = ref()
let infor_type_list:any = ref()
let region_data: any = ref([])
// 查询
function inquire() {
    find_data()
}
// 重置
function reset() {
    infor.type_information = ''
    infor.type_order = ''
    infor.phone_number = ''
    infor.we_chat = ''
    infor.maintainers = ''
    infor.region_release = ''
    infor.is_pay = ''
    infor.released = ''
    params_init.page = 1
    get_list()
    
}
const limit = ref(10)
let params_init ={
    limit : limit.value,
    page : 1,
    style : "",cat_1:'',mobile:'',number:"",area:"",city:"",address:"",admin_id:"",    is_pay:"",created_at_start:"",created_at_end:""
}
const get_list =async ()=>{
 let {data} = await get_information_list(params_init)
 table_list.value = data.list
 page_list.value = data.pageData
 console.log(data,"dataget_information_listget_information_list");
 
}
// 选择时间发生改变
const time_change = (val:any)=>{
    console.log(val,"val");
    infor.created_at_start =(new Date(val[0].replace(/-/g,"/"))).getTime() / 1000
    infor.created_at_end =(new Date(val[1].replace(/-/g,"/"))).getTime() / 1000
}
// 页数发生改变
const page_change = (val:any)=>{
    params_init.page = val
    get_list()
}
let params:any = {style : "",cat_1:'',mobile:'',number:"",area:"",city:"",address:"",admin_id:"",    is_pay:"",created_at_start:"",created_at_end:"",limit : limit.value,
    page : 1}
// 查询接口
const find_data = async()=>{
    params_init.page = 1
    params_init.style = infor.type_information
    params_init.cat_1 = infor.type_order
    params_init.mobile = infor.phone_number
    params_init.number = infor.we_chat
    params_init.area = infor.region_release[0]
    params_init.city = infor.region_release[1]
    params_init.address = infor.region_release[2]
    params_init.admin_id = infor.maintainers
    params_init.is_pay = infor.is_pay
    params_init.created_at_start = infor.created_at_start
    params_init.created_at_end =  infor.created_at_end
    let {data} = await get_information_list(params_init)
    table_list.value = data.list
    page_list.value = data.pageData
}
// 维护人列表
const get_user_data_list =async ()=>{
    let {data} = await get_user_data()
    maintainers_list.value = data.list
}
// 获取地区
const get_region_data_list =async()=>{
    let {data} = await get_region_data({ is_tree: 1 })
    console.log(data,"data地区");
    region_data.value = data
}
// 获取类型
const get_infor_type_list = async()=>{
    let {data} = await get_infor_type()
    infor_type_list.value = data
}
onMounted(()=>{
    get_list()
    get_user_data_list()
    get_region_data_list()
    get_infor_type_list()
})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;
    background: rgba(24, 145, 255, 1);

    .right_route {
        padding: 10px 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        .bottom_content {
            margin-top: 20px;
        }

        .date {
            display: flex;
            margin: 20px 0;

            span {
                display: inline-block;
                flex: 1;
                text-align: center;
                @include font(#333, 17, 60);
                cursor: pointer;
            }

            .active {
                background: rgba(64, 158, 255, 1);
                color: #FFF;
            }
        }

        .scrollbar {
            width: calc(100vw - 250px);
        }

        .search_input {
            // display: flex;
            // flex-wrap: wrap;

            // padding-right: 192px;
            .item_first {

                .item {
                    display: flex;
                    align-items: center;
                    margin-top: 20px;

                    span {
                        display: inline-block;
                        width: 70px;
                        @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
                    }

                    >div {
                        flex: 1;
                    }
                }
            }

            .submit_button {
                display: flex;
                align-items: center;
                margin-top: 20px;
                // margin-left: 223px;
                justify-content: right;
            }
        }

        .table {
            margin-top: 40px;
        }

        .pagination {
            margin: 20px 0;
            display: flex;
            justify-content: right;
        }
    }
}

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    // background: var(--el-color-danger-light-9);
    @include font(#333, 13, 50);
    cursor: pointer;

    .num {
        margin-left: 5px;
    }

    &.active_nav {
        color: rgb(64, 158, 255);
    }
}

:deep(.el-select) {
    width: 100%;
}

:deep(.picker_item) {
    width: 100%;
}
:deep(.el-cascader) {
  width: 100%;
}
:deep(.el-input--large){
  height: 32px;
}
:deep(.el-button){
  height: 32px;
}
:deep(.el-date-editor){
    width:calc(100% - 20px) !important;
}
</style>